<template>
  <u-toast ref="uToast"></u-toast>
  <LookAround :LeftShow="true"></LookAround>
  <view class="Login">
    <view class="LoginTip"> 登录/注册 更精彩 </view>
    <!-- 登录信息 -->
    <view>
      <u-input placeholder="请输入手机号码" border="bottom" v-model="Users.phone" :customStyle="customStyle"></u-input>

      <!-- 获取验证码 -->
      <u-input placeholder="请输入短信验证码" type="number" border="bottom" v-model="Users.code" :customStyle="customStyle">
        <template #suffix>
          <text @tap="getCode" :text="tips" style="color:#777777;" class="u-page__code-text">{{ tips }}</text>
          <u-button color="#FF0000" @tap="getCode" :text="tips" type="primary" size="small"></u-button>
        </template>
      </u-input>
      <!-- 请输入密码 -->
      <u-input placeholder="请输入设置的密码" border="bottom" type="password" v-model="Users.password" :customStyle="customStyle">
      </u-input>
      <!-- 请再次输入密码 -->
      <u-input placeholder="请再次输入设置的密码" border="bottom" type="password" v-model="Users.password_re"
        :customStyle="customStyle">
      </u-input>
      <!-- 登录 -->
      <view style="text-align: center">
        <view class="login boder_r" @click="register">注册</view>
      </view>
      <!-- 第三方登录 -->
      <view class="Thirdparty">
        <view>第三方登录</view>
        <div class="weixin">
          <u-icon color="#28C445" size="26" name="weixin-circle-fill"></u-icon>
        </div>
      </view>
      <!-- 同意协议 -->
      <view class="agreement">
        <u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
          <u-checkbox activeColor="#ffbc01" :name="true"> </u-checkbox>
        </u-checkbox-group>
        <view>
          我已阅读并同意外卖狮 <span class="color1">用户协议</span> 和
          <span class="color2">隐私政策</span>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getCurrentInstance, reactive, onDeactivated } from "vue";
import Register from "@/Hooks/Login/register";
const { proxy } = getCurrentInstance() as any;
const {
  tips,
  getCode,
  codeChange,
  seconds,
  customStyle,
  register,
  checkboxValue,
  checkboxChange,
  Users,
} = Register(proxy);
onDeactivated(() => {
  Users.phone = "";
  Users.code = "";
  Users.password = "";
  Users.password_re = "";
});
</script>

<style lang="scss" scoped>
.Login {
  padding: 0 48rpx;
  font-size: $fontS_26;

  .LoginTip {
    font-size: $fontS_50;
    font-weight: 400;
    margin-left: 10rpx;
    height: 135rpx;
  }

  .register {
    margin: 43rpx 0 57rpx;
    color: $color_777;
  }

  .login {
    margin-top: 90rpx;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: $color_def;
    color: $color_fff;
  }

  .pass {
    color: $color_777;
    margin-top: 37rpx;
  }

  .Thirdparty {
    margin-top: 166rpx;
    text-align: center;
    color: $color_A4;
    font-size: $fontS_20;

    .weixin {
      display: flex;
      justify-content: center;
    }
  }

  .agreement {
    margin-top: 25rpx;
    color: $color_777;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: $fontS_26;
    text-align: center;

    .color1 {
      color: $color_def;
    }

    .color2 {
      color: $color_def;
    }
  }
}
</style>
